<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>结算</title>
	<link rel="stylesheet" type="text/css"  href="dist/css/bootstrap.min.css" th:href="@{/dist/css/bootstrap.min.css}">
	<link rel="stylesheet" type="text/css" href="css/index.css" th:href="@{/css/index.css}" />
	<link rel="stylesheet" type="text/css" href="css/animate.css" th:href="@{/css/animate.css}" />
	<link rel="stylesheet" type="text/css" href="css/cart.css" th:href="@{/css/cart.css}"/>

	<style type="text/css">
		.form-control{
			width: 100%;
		}
	</style>
</head>
<body>
<!--导航部分  begin-->
<div th:replace="common/header :: header"></div>
<!--导航部分 end-->

<!--最顶端轮播图片 begin-->
<div th:replace="common/carousel :: carousel"></div>
<!--最顶端轮播图片 end-->

<!--购物车 begin-->
<!--外层div-->
<div class="container">
	<!--左边-->
	<div class="col-md-8 col-sm-12">
		<ol class="breadcrumb">
			<li>
				<a href="#" class="text-success"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;送货地址</a>
			</li>
		</ol>

		<!--送货地址  begin-->
		<div style="margin-bottom: 5px;" id="addrDiv">
			<ul class="list-group" id="address">
				<li th:if="${not #lists.isEmpty(addressList)}" th:each="address:${addressList}" class="list-group-item">
					<input type="radio" name="addr" th:value="${address.id}" th:text="${address.province} + ${address.city} + ${address.area} + ${address.detailAddress}">&nbsp;
				</li>
				<li class="list-group-item" th:if="${#lists.isEmpty(addressList)}">暂无收货地址！</li>

				<!--<li class="list-group-item"><input type="radio" name="addr">&nbsp;江苏省苏州市金阊区烽火路82号 天创大厦1层</li>-->
				<!--<li class="list-group-item"><input type="radio" name="addr" checked>&nbsp;江苏省苏州市金阊区烽火路83号 天创大厦2层 &nbsp;<span class="text-success">默认地址</span></li>-->
			</ul>
			<a href="#" class="text-info" onclick="dispalyMoreAddr(this)">更多地址↓&nbsp;&nbsp;</a>
			<a href="javascript:void(0)" id="addAddr" class="text-success" data-toggle="modal" data-target="#addrModal">添加新地址</a>
		</div>
		<hr>


		<!--添加新地址模态框 begin-->
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="addrModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">
							<span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;添加新收货地址
						</h4>
					</div>
					<div class="modal-body">
						<!--登录的form表单-->
						<form action="#" id="addressForm" class="form-horizontal" role="form">
							<div class="form-group">
								<label class="col-md-2 control-label" style="margin-right: 2.9%;">所在地区:</label>

								<div data-toggle="distpicker">
									<div class="form-group col-sm-12 col-md-3">
										<label class="sr-only" for="province1">Province</label>
										<select class="form-control" id="province1" name="province"></select>
									</div>
									<div class="form-group col-sm-12 col-md-3">
										<label class="sr-only" for="city1">City</label>
										<select class="form-control" id="city1" name="city"></select>
									</div>
									<div class="form-group col-sm-12 col-md-3">
										<label class="sr-only" for="district1">District</label>
										<select class="form-control" id="district1" name="area"></select>
									</div>
								</div>
							</div>
							<div class="form-group has-feedback" style="clear:both">
								<label class="col-sm-2 control-label">详细地址:</label>
								<div class="col-sm-5">
									<textarea class="form-control" id="deatails" name="detailAddress"></textarea>
								</div>

							</div>
							<div class="form-group has-feedback">
								<label class="col-sm-2 control-label">邮政编码</label>
								<div class="col-md-5">
									<input type="text" class="form-control" id="lastname2" name="emailCode" placeholder="邮政编码">
									<span class="glyphicon glyphicon-hand-left form-control-feedback"></span>
								</div>
							</div>

							<div class="form-group has-feedback">
								<label class="col-sm-2 control-label">姓名</label>
								<div class="col-sm-5">
									<input type="text" class="form-control" id="username" name="receiver" placeholder="收货人姓名">
									<span class="glyphicon glyphicon-user form-control-feedback"></span>
								</div>
							</div>

							<div class="form-group has-feedback">
								<label class="col-sm-2 control-label">电话</label>
								<div class="col-sm-5">
									<input type="tel" class="form-control" id="tel" name="tel" placeholder="合法手机格式">
									<span class="glyphicon glyphicon-phone form-control-feedback"></span>
								</div>
							</div>

							<div class="form-group">
								<div class="col-sm-offset-2 col-sm-10">
									<div class="checkbox">
										<label>
											<input type="checkbox" id="setDefaultAddr" name="isDefault"><span class="text-success">设置默认地址</span>
										</label>
									</div>
								</div>
							</div>

							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								<input type="button" class="btn btn-primary" value="提交地址" th:onclick="saveAddress()">
							</div>
						</form>
						<!--form结束-->
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
		</div>
		<!--左边-->
		<ol class="breadcrumb">
			<li>
				<a href="#" class="text-success"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;结算清单</a>
			</li>
		</ol>

		<!--确认订单列表 begin-->
		<div class="table-responsive" id="imgDiv">
			<table class="table table-hover table-striped" style="vertical-align:middle;">
				<thead>
				<tr class="text-success success">
					<th id="sequence">序号</th>
					<th>图片</th>
					<th>书名</th>
					<th>单价</th>
					<th>数量</th>
					<th>合计</th>
				</tr>
				</thead>
				<tbody id="tby">
				<tr th:each="cart,iter:${list}">
					<td th:text="${cart.bookId}">1001</td>
					<td><img src="images/tenxunchuan.jpg" th:src="@{'/images/' + ${cart.imgUrl}}"></td>
					<td th:text="${cart.bookName}">腾讯传</td>
					<td th:text="${cart.newPrice + '元'}">35.0元</td>
					<td th:text="${cart.count}">10</td>
					<td th:text="${cart.newPrice * cart.count}" th:id="${'cartPrice' + iter.index}">100$</td>
				</tr>
				</tbody>
				<tfoot>
				<tr>
					<td colspan="4"></td>
					<td class="text-success">总价:</td>
					<td class="text-success" th:text="${session.userCartInfo.totalPrice}">345$:</td>
				</tr>
				<tr style="background-color: white;">
					<td>
						<a href="index.html" th:href="@{/book/index}" class="btn btn-info">&lt;&lt;继续购买</a>
					</td>
					<td colspan="4"></td>
					<td>
						<a href="javascript:void(0)" id="pay" class="btn btn-warning" data-toggle="modal" data-target="#payModal">结算</a>
					</td>
				</tr>
				<!-- 模态框（Modal） -->
				<div class="modal fade" id="payModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title" id="payModalLabel">
									<span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;推荐使用微信扫码支付
								</h4>
							</div>
							<div class="modal-body">
								<center>
								<form action="#" id="payForm" class="form-horizontal" role="form">
									<div class="form-group">
										<img src="../static/images/wepay.jpg" th:src="@{/images/wepay.jpg}" style="height:300px; width: 300px" class="wepay" alt="通用的占位缩略图">
									<div class="modal-footer">
										<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
										<input type="button" class="btn btn-primary" value="已支付" th:onclick="Order()">
									</div>
								</center>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
				</div>
				</tfoot>
			</table>
		</div>
		<!--确认订单列表 end-->

	</div>

	<!--右边-->
	<div class="col-md-4 col-sm-3 col-xs-8">
		<ol class="breadcrumb">
			<li>
				<a href="#" class="text-success"><span class="glyphicon glyphicon-shopping-cart "></span>我的购物车</a>
			</li>
			<li>
				<a href="# " th:text="${session.userCartInfo.num + '个商品'}">3个商品</a>
			</li>
			<li>
				<a href="# " th:text="${'总价' + session.userCartInfo.totalPrice + '元'}" id="total">总价100元</a>
			</li>
		</ol>

		<!--猜您喜欢-->
		<div>
			<span class="text-info"><span class="glyphicon glyphicon-heart"></span><span style="font-size: 20px; ">&nbsp;&nbsp;猜您喜欢</span></span>
			<div class="row" id="love">
				<div class="wow fadeInRight animated">
					<div class="thumbnail">
						<a href="details.html" th:href="@{/book/detail(id=5)}"><img src="images/dongjian.jpg " th:src="@{/images/dongjian.jpg}" style="height: 200px; " alt="通用的占位符缩略图 "></a>
						<div class="caption ">
							<h3>洞见</h3>
						</div>
					</div>
				</div>
				<div class="wow fadeInRight animated">
					<div class="thumbnail ">
						<a href="details.html" th:href="@{/book/detail(id=6)}"><img src="images/tenxunchuan.jpg" th:src="@{/images/tenxunchuan.jpg}" style="height: 200px; " alt="通用的占位符缩略图 "></a>
						<div class="caption ">
							<h3>腾讯传</h3>
						</div>
					</div>
				</div>
				<div class="wow fadeInRight animated">
					<div class="thumbnail ">
						<a href="details.html" th:href="@{/book/detail(id=15)}"><img src="images/taikong.jpg" th:src="@{/images/taikong.jpg}" style="height: 200px; " alt="通用的占位符缩略图 "></a>
						<div class="caption ">
							<h3>太空</h3>
						</div>
					</div>
				</div>
				<div>
					<ul class="pager">
						<li>
							<a href="#" onclick="pageUp() ">&larr;上一页</a>
							<a href="#" onclick="pageDown() ">下一页 &rarr;</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--喜欢end-->
	</div>
</div>

<!--首页底部信息 begin-->
<div th:replace="common/footer :: footer"></div>
<!--end-->

<script src="dist/js/jquery.min.js" th:src="@{/dist/js/jquery.min.js}"></script>
<script src="js/carousel.js" th:src="@{/js/carousel.js}" type="text/javascript" charset="utf-8"></script>
<script src="dist/js/bootstrap.min.js" th:src="@{/dist/js/bootstrap.min.js}"></script>
<script src="js/wow.js" th:src="@{/js/wow.js}"></script>
<script src="js/cha/js" th:src="@{/js/cha.js}"></script>
<script src="dist/js/distpicker.data.min.js" th:src="@{/dist/js/distpicker.data.min.js}"></script>
<script src="dist/js/distpicker.min.js" th:src="@{/dist/js/distpicker.min.js}"></script>
<!--<script src="js/details.js" type="text/javascript" charset="utf-8"></script>-->
<!--<script src="js/cart.js" type="text/javascript" charset="utf-8"></script>-->
<script src="js/confirm_order.js" th:src="@{/js/confirm_order.js}"></script>
<script th:inline="javascript">
	//获取应用路径
	var contextPath = [[${#request.getContextPath()}]];
</script>
<script type="text/javascript">
	if(!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
		new WOW().init();
	};

	function Order() {
		var val = $('input:radio[name="addr"]:checked').val();
		if (val == null){
			alert("请选择地址!");
			return;
		}else {
			window.location.href = contextPath + "/order/commitOrder?addrId=" + val;
		}
	}

	//新增收货地址
	function saveAddress() {
		var addressData = $("#addressForm").serialize();
		$.ajax({
			url: contextPath + '/address/save',
			data:addressData,
			method:"post",
			success:function (data) {
				if(data == 'success'){
					window.location.reload(true);
				}
			}
		})
	}
</script>
</body>
</html>
